<template>


    <div>
        <div class="comment-item">
            <div>
                <a v-if="comment.flag" v-show="false" :id="'comment'+comment.id"></a>
                <div class="top">
                    <div><el-image style="width: 60px; height: 60px" :src="srcToPath(comment.avatar)" fit="fit" /></div>
                    <div>{{ comment.username }}</div>
                </div>
                <div class="content text2" v-html="comment.content"></div>
            </div>
            <div class="bottom">
                <div>{{ formatDate(comment.createdAt) }}</div>
                <div class="cursor" @click="handle(0, comment.commentId)">查看回复</div>
                <div class="cursor" @click="handle(1, comment.commentId)">回复</div>
            </div>


        </div>
        <!-- 回复框 -->
        <el-drawer v-if="drawer" v-model="drawer" size="400px" title="I am the title" :before-close="handleClose">
            <div class="el-drawer-body" style="height: 100vh;" v-infinite-scroll="getReplyList"
                :infinite-scroll-disabled="replyDetailsList.length >= replyModel.total" :direction="direction"
                infinite-scroll-delay="500" :infinite-scroll-distance="150">
                <p>评论详情</p>
                <div class="comment-item" style="border: none;">
                    <div>
                        <div class="top">
                            <div><el-image style="width: 60px; height: 60px" :src="srcToPath(comment.avatar)" fit="fit" /></div>
                            <div>{{ comment.username }}</div>
                        </div>
                        <div class="content text2" ><span v-html="comment.content"></span></div>
                    </div>
                    <div class="bottom">
                        <div>{{ formatDate(comment.createdAt) }}</div>
                        <!-- <div class="cursor" @click="handle(0, comment.commentId)">查看回复</div>
                    <div class="cursor" @click="handle(1, comment.commentId)">回复</div> -->
                        <div class="cursor" @click="handle(1, comment.commentId)">回复</div>
                    </div>
                </div>
                <el-divider></el-divider>
                <p style="color:var(--el-text-color-regular);font-size:14px">相关回复共{{ replyModel.total }} 条</p>
                <div class="comment-item" v-for="item in replyDetailsList" :key="item.replyId">
                    <div>
                        <div class="top">
                            <div><el-image style="width: 60px; height: 60px" :src="srcToPath(item.avatar)" fit="fit" /></div>
                            <div>{{ item.username }}</div>
                        </div>
                        
                        <div class="content text2"><span v-html=" item.content"></span></div>
                    </div>
                    <div class="bottom">
                        <div>{{ formatDate(item.createdAt) }}</div>
                        <div class="cursor">...</div>
                        <!-- <div class="cursor" @click="handle(1, item)">回复</div> -->
                    </div>
                </div>
                <div style="height:150px;font-size:40px;text-align: center;line-height:150px" v-if="loading">
                    <el-icon class="is-loading">
                        <Loading />
                    </el-icon>
                </div>
            </div>

        </el-drawer>

        <!-- 评论/回复框 -->
        <el-dialog  align-center draggable v-model="dialogVisible" title="回复" width="500" :before-close="handleClose">
            <el-input v-model="reply.content" type="textarea" rows="5" :placeholder="`回复${comment.username}的评论`" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addReply">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import formatDate from '@/utils/formatDate'
import { ref, unref, } from 'vue';
import srcToPath from '@/utils/srcToPath.js'

import { getCommentReply,addCommentReply } from '@/api/reply'
import { ElMessage } from 'element-plus';
const emit = defineEmits(['changeMsg'])
const props = defineProps({
    comment: {
        type: Object,
        required: true
    }
})
// 回复区域
const dialogVisible = ref(false)
const drawer = ref(false)
const replyModel = ref({
    pageSize: 4,
    pageNum: 1,
    desc: 'desc',
    commentId: null,
    total: 1,
})
const replyDetailsList = ref([])
const reply = ref({
    commentId:null,
    userId:null,
    content:null,
})
const handle = async (i, id) => {
    if (i == 0) {
        drawer.value = true
        // emit('replyDetails', id)
        replyModel.value.commentId = id
        replyModel.value.total = 1
        replyModel.value.pageNum = 1;
        replyDetailsList.value = []
        getReplyList()
    } else {
        // emit('reply', id)
        // 回复的逻辑
        reply.value.commentId = id
        reply.value.userId = props.comment.userId

        dialogVisible.value = true
    }
}
const loading = ref(false)

const getReplyList = async () => {
    loading.value = true
    console.log("执行", replyDetailsList.value.length, replyModel.value.total);
    if (replyDetailsList.value.length >= replyModel.value.total) {
        return
    }
    const res = await getCommentReply(unref(replyModel))
    replyDetailsList.value.push(...res.data.reply)
    replyModel.value.total = res.data.total
    replyModel.value.pageNum++;
    console.log(res);
    loading.value = false
}

const addReply = async() => {
    console.log(unref(reply));
    const res = await addCommentReply(unref(reply))
    console.log(res);
    if(res.status == 200){
        ElMessage.success("回复"+res.message)
        dialogVisible.value = false
    }
}


</script>
<style lang="scss" scoped>
.el-drawer-body {
    min-width: 300px !important;
}

.comment-item {
    border-bottom: 1px dashed var(--el-text-color-regular);
    padding: 10px 20px;

    .top {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;

        :nth-child(1) {
            border-radius: 50%;
        }

        div+div {
            margin-left: 20px;
        }


    }

    .content {
        padding: 20px 0;
    }

    .bottom {
        color: var(--el-text-color-regular);
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
.el-mydialog{
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}
</style>